<template lang="html">
  <div class="app">
    <nav>
      <div class="w1200">
        <div class="logo inline fl"></div>
        <div class="slogn inline fl"></div>
        <div class="navs inline">
          <a href="#" @click='c0()'>首页</a>
          <a href="javascript:void(0);" @click='c1()' :class="{active:isA1}">合作课</a>
          <a href="javascript:void(0);" @click='c2()' :class="{active:isA2}">分享课</a>
          <a href="javascript:void(0);" @click='c3()' :class="{active:isA3}">公开课</a>
        </div>
        <div class="toptel fr">
          <i class="icon icon-tel ver-middle"></i>4008-260-272
        </div>
      </div>
    </nav>
    <div class="banner" :style='banner'></div>
    <div class="grayBg">
      <div class="w1200 intro">
        <div class="img">
          <img v-lazy="require('../../assets/images/ts-logo2.png')" alt="">
        </div>
        <div class="txt">
          <b>天沙学院</b>主要面向创新领域企业的<b>创始团队</b>和<b>行政、财务、HR、法务负责人</b>，在全国重点创业城市开展，
        </div>
        <div class="txt">
          秉承贴近创新、着重实务的理念，为广大创业者<b>提供工商、财税、社保、知识产权</b>和<b>法律知识</b>观念提升平台和创业交流平台，
        </div>
        <div class="txt">
          成为创业者的<b>“创客第一课堂”</b>
        </div>
      </div>
    </div>
    <div class="w1200 course" id='course1'>
      <div class="font fl">
        <div class="tit">合作课</div>
        <div class="sub overhide">
          <div class="price no-price fl">定制报价</div>
          <div class="tel fr">咨询电话：4008-260-272</div>
        </div>
        <div class="txt">
          天沙学院-合作课是天沙学院与解忧小二、服务商合作，以标准化课件为基础，参考合作方提出的相关主题建议，共建创客课程，为创业者群体提供更便捷的工商、财税、社保、知识产权、法律知识获取通道。
        </div>
      </div>
      <img v-lazy="require('../../assets/images/ts-img1.jpg')" alt="" class="fr">
    </div>
    <div class="grayBg">
      <div class="w1200 course" id='course2'>
        <img v-lazy="require('../../assets/images/ts-img2.jpg')" alt="" class="fl">
        <div class="font fr">
          <div class="tit">分享课</div>
          <div class="sub overhide">
            <div class="price fl"><b>50</b> 元/人/次</div>
            <div class="tel fr">咨询电话：4008-260-272</div>
          </div>
          <div class="txt">
            天沙学院-分享课是天沙学院联合各方合作伙伴共同开展的小范围、私密性创客课程，通过分享课在全国重点城市的推进为创业者提供可借鉴的工商、财税、社保、知识产权、法律实务方法。
          </div>
        </div>
      </div>
    </div>
    <div class="w1200 course"  id='course3'>
      <div class="font fl">
        <div class="tit">公开课</div>
        <div class="sub overhide">
          <div class="price fl"><b>200</b> 元/人/次</div>
          <div class="tel fr">咨询电话：4008-260-272</div>
        </div>
        <div class="txt">
          天沙学院-公开课是天沙学院针对更广泛的创业者群体，就创业企业工商、财税、社保、知识产权、法律知识进行普及的大型课程。通过天沙学院公开课向企业传达工商、财税、社保、知识产权、法律健康理念和专业方法论。
        </div>
      </div>
      <img v-lazy="require('../../assets/images/ts-img3.jpg')" alt="" class="fr">
    </div>
    <bot-footer/>
  </div>
</template>

<script>
// import tsHeader from '../header/ts-header.vue';
import footer from '../footer/footer.vue';
export default {
  data(){
    return{
      banner: {background: "url(" + require('../../assets/images/ts-banner.jpg') + ") center no-repeat"},
      isA1:false,isA2:false,isA3:false
    }
  },
  components:{
    // 'ts-header':tsHeader,
    'bot-footer':footer
  },
  methods:{
    c0:function(){
      this.actScroll(0);
      this.isA1=false;
      this.isA2=false;
      this.isA3=false;
    },
    c1: function(){
      var course1=document.getElementById('course1');
      var offTop1=course1.offsetTop;
      this.actScroll(offTop1);
      this.isA1=true;
      this.isA2=false;
      this.isA3=false;
    },
    c2: function(){
      var course2=document.getElementById('course2');
      var offTop2=course2.offsetTop;
      this.actScroll(offTop2);
      this.isA2=true;
      this.isA1=false;
      this.isA3=false;
    },
    c3: function(){
      var course3=document.getElementById('course3');
      var offTop3=course3.offsetTop;
      this.actScroll(offTop3);
      this.isA3=true;
      this.isA1=false;
      this.isA2=false;
    },
    // 动态滚动函数
    actScroll: function (lastPos){
      var course1=document.getElementById('course1');
      var offTop1=course1.offsetTop;
      var timer=null;
      var b=document.body.scrollTop;
      var e=lastPos;
      var c=e-b;
      var t=0;
      var d=25;
      clearInterval(timer);
      timer=setInterval(function(){
        t++;
        if(t>=d){
          clearInterval(timer);
        }
        document.body.scrollTop=Tween.Cubic.easeOut(t,b,c,d);
        document.documentElement.scrollTop=Tween.Cubic.easeOut(t,b,c,d);
      },15);
    }
  },
  mounted(){
    document.title = '解忧工场-天沙学院'
  }
}
</script>

<style lang="less" scoped>
nav{
  width: 100%;height: 75px;line-height: 75px;border-bottom: 1px solid #f5a41d;
  position: fixed;left:0;top:0;background-color: #fff;z-index: 99999;
  .logo{
    width: 181px; height: 37px;margin-top: 18px;
    background: url('../../assets/images/ts-logo.png');
  }
  .slogn{
    width: 132px; height: 23px;margin-left: 12px;margin-top: 25px;
    background: url('../../assets/images/ts-slogn.png');
  }
  .navs{
    margin-left: 80px;color: #666;
    a{
      margin-left: 78px;font-size: 14px;
      &.active,&:hover{color: #ffb040;}
      .icon-ts{
        width: 24px; height: 23px;
        background: url('../../assets/images/css_sprites_index.png') -58px -99px;margin-right: 6px;
      }
    }
    .router-link-exact-active{color: #ffb040;}
  }
  .toptel{
    font-size: 16px;color: #ffb040;font-weight: bold;
    .icon-tel{
      width: 16px; height: 16px;
      background: url('../../assets/images/css_sprites_index.png') -107px -52px;
      margin: 0 6px 0 35px;
    }
  }
}
.banner{width: 100%;height: 625px;}
.grayBg{width: 100%;background-color: #f3f3f3;}
.intro{
  padding: 50px 0;color: #666;line-height: 34px;text-align: center;
  .img{margin-bottom: 5px;}
  .txt b{font-size: 16px;}
}
.course{
  overflow: hidden;padding: 74px 0;
  .font{
    width: 420px;
    .tit{font-size: 32px;margin: 135px 0 12px;}
    .no-price{color: #ffb202;}
    .price b{color: #ff3333;font-size: 16px;}
    .txt{color: #666;line-height: 28px;margin-top: 18px;}
  }
}
</style>
